// vue入口文件 这是入口文件

// 引入vue库
import Vue from 'vue'
// 导入MUI的组件库   
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'
// 引入路由组件
import VueRouter  from 'vue-router'
Vue.use(VueRouter)
// 引入Mint-UI组件
/* import { Header} from 'mint-ui'
Vue.component(Header.name,Header)
// 引入图片轮播组件
import { Swipe, SwipeItem,Button,Lazyload } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name,Button)
Vue.use(Lazyload); */

// 使用全局引入mint-ui的方式
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

// 导入ajax请求组件
import VueResource from 'vue-resource'
Vue.use(VueResource)
// 引入缩略图组件，并且安装
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

// 注册vuex
import  Vuex from 'vuex'
Vue.use(Vuex)
//每次哟啊执行这个对象的时候 都要从localStorage 中获取

var car = JSON.parse(localStorage.getItem('car') || '[]')

console.log(car)
// 创建vuex实例
var store = new Vuex.Store({
    state:{
        car: car
    },
    mutations:{
        addToCat(state,goodsinfo){

            //设置是否有相同的商品加入购物车的标志
            var flag = false;

             state.car.some(item=>{
                 if(item.id == goodsinfo.id){
                    item.count  += parseInt(goodsinfo.count);
                    flag = true
                    return true 
                 }
             })

             if(!flag){
                state.car.push(goodsinfo)
             }

            //  当更新car之后，把car数组，存储到本地的localStorage 中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsInfo(state,goodsinfo){
            //修改购物车中商品的数量值
            state.car.some(item =>{
               if(item.count = goodsinfo.id){
                  item.count = parseInt(goodsinfo.count)
                  return true;
               } 
            })

            // 每当购物车 修改数据之后 更新到localStorage中
            localStorage.setItem('car',JSON.stringify(state.car))  
        },
        removeFromCar(state,id){
            // 根据id 从store中的购物车删除对应的商品数据
            state.car.some((item,i) =>{
                if(item.id  = id){
                    state.car.splice(i,1)
                    return true
                }  
            })
            // 将删除商品后的购物车 同步到store中
            localStorage.setItem('car',JSON.stringify(state.car))  
        },
        uodateGoodsSelected(state,info){
            state.car.some(item =>{
                if(item.id == info.id){
                   item.selected = info.selected
                }
            })

            // 同步购物车商品的状态
            localStorage.setItem('car',JSON.stringify(state.car))  
        }
      
    },
    getters:{
        // 相当于vm实例中的计算属性
        getAllCount(state){
            var  c = 0;
            state.car.forEach(item =>{
                 c += item.count
            })
            return c
         },
         getGoodsCount(state){
            var o = {};
            state.car.forEach( item =>{
                 o[item.id] = item.count
            })
            return o ;
       },
       getGoodsSelected(state){
           var o = {}
           state.car.forEach(item =>{
               o[item.id]  = item.selected
           })
           return o;
       },
       getGoodsCountAndAmount(state){   //计算购物车的总价
        var o = {
            count:0,   //勾选的数量
            amount:0    //勾选的总价
        }

        state.car.forEach(item =>{
            o.count += item.count;
            o.amount += item.count * item.price;

        })
        return o ;

       }
      
    }
})

// 设置vue请求的根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005';
Vue.http.options.emulateJSON = true; //设置提交的表单的数据格式

// 导入格式化时间组件
import moment from 'moment'
// 格式化时间的过滤器
Vue.filter('dataFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern)
})

// 引入App组件
import app from './App.vue'


// 接收路由组件
import router  from './router.js'


// 创建Vue实例
var vm = new Vue({
    el:'#app',
    data(){
        return {}
    },
    render:c => c(app),
    // 挂载路由对象
    router:router,
    store:store    //把vuex实例挂载到vm实例中
})